<template>
  <div class="programme-index">
    <Header />
    <div id="wrap">
      <!-- 左侧 -->
      <div class="left">
        <div class="left-inner">
          <div class=" item"> 
            <img src="../../assets/images/公租房-copy.png" alt="">
            <p>企业基本面数据</p>
            <p>（ 3亿余家个体或企业信息 ）</p>
          </div>
          <div class=" item">
              <img src="../../assets/images/数据库_data .png " alt="#">
              <p>工商注册企业股权数据</p>
              <p>（ 0.5亿节点/1亿条边 ）</p>
          </div>
          <div class=" item item3">
            <img src="../../assets/images/云.png" alt="">
            <img src="../../assets/images/speak.png" alt="">
            <p>金融新闻舆情公告数据</p>
            <p>（ 百余家金融新闻网站 ）</p>
          </div>
          <div class="item ">
            <img src="../../assets/images/图表 折线图.png" alt="">
            <p>上市公司产业链数据</p>
            <p>（ 5千家公司20万条产业链 ）</p>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">
       <!-- <h1 class="title">时序传导预测</h1> -->
        <!-- <h1>股权穿透分析</h1> -->
      </div>

      <!-- 右侧 -->
      <div class="right">
        <div class="right-inner">
         
          <div class=" item item5"> </div>
          <div class=" item item6"></div>
          <div class=" item item7"></div>
          <div class="item item8"></div>
        </div>
      </div>

    </div>


  <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
</script>

<style lang="scss" scoped>
.programme-index {
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)), url(../../assets/images/6-7背景图.jpg);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: auto;
}
#wrap{
  margin: 60px 60px 50px;
  display: flex;
}
.left{
  width:350px;
  height: 810px;
  background-color: rgba($color: #3F535D, $alpha: 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 15px;
}
.left-inner{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #2A3E4C;
  border-radius: 10px;
  background-color: rgba($color: #2A3E4C, $alpha: 0.7);
  justify-content: space-between;
}

.left .left-inner .item{
  width: 100%;
  height: 190px;
  border: 2px dashed #222;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
}
.left .left-inner .item img{
  width: 100px;
  margin-bottom: 6px;  
}
.left .left-inner  .item p{
  font-size: 16px;
  font-weight: bold;
}
.left .left-inner  .item3 img{
 width: 80px;
 height: 40px;
 margin: 0 auto;
 
} 



.center{
  flex: 1;
  background-image: url(../../assets/images/10-2-大图.png);
  background-size: 130%;
  background-position: center;
  background-repeat: no-repeat;
} 





.right{
  width: 350px;
  background-color: rgba($color: #415662 , $alpha:0.6);
  height: 810px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right-inner{
  height: 580px;
  width: 260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #A1A9AF;
  border-radius: 10px;
 
}
.right .right-inner .item{
  height: 135px;
  width: 260px;
  border: 1px dashed black;
  border-radius: 10px;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  background-size: contain;
}
.right .right-inner .item5{
  height: 175px;
}
.right .right-inner .item5{
  background-image: url(../../assets/images/10-1-企业1.png);
  background-size: 260px;

}
.right .right-inner .item6{
  background-image: url(../../assets/images/10-1-企业4.png);
  background-size: 260px;
 
}
.right .right-inner .item7{
  background-image: url(../../assets/images/10-1-企业2.png);
  background-size: 260px;

}
.right .right-inner .item8{
  background-image: url(../../assets/images/10-1-企业3.png);
  margin-bottom: 0;
  background-size: 260px;

}
</style>
